<template>
  <div>
    <van-nav-bar title="不凡乐购" left-text="返回" left-arrow @click-left="onClickLeft" class="navbar" />
    <form action="/">
      <van-search
        class="box"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @clear="onClear"
        @cancel="onCancel"
      />
    </form>
    <div class="searchtips" ref="hidebox">
      <div class="tips" @click="addtip(item)" v-for="item in keywords" :key="item.id">{{item.name}}</div>
    </div>
    <div class="history" ref="history">
      <div class="top">
        <div>历史记录</div>
        <div class="icon" @click="del"></div>
      </div>
      <div class="old" v-for="(item,index) in list" :key="index">
        <div class="item" @click="toinfo(item)">{{item}}</div>
      </div>
    </div>
    <div class="hotsearch" ref="hotsearch">
      <div class="top">
        <div>热门搜索</div>
      </div>
      <div class="hot" v-for="item in hotKeywordList" :key="item.id">
        <div class="item">{{item.keyword}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { helperaction, addhistoryaction, indexaction } from "@/api/search";
export default {
  data() {
    return {
      value: "",
      keywords: [],
      list: [],
      hotKeywordList: [],
      historyData: []
    };
  },
  created() {
    indexaction({
      openId: 17516331686
    }).then(res => {
      console.log(res);
      this.hotKeywordList = res.hotKeywordList;
      this.historyData = res.historyData;
      for(var i=0;i<this.historyData.length;i++){
        this.list.push(this.historyData[i].keyword)
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    del(){
      this.list = []
      this.$refs.history.style.display = "none";
    },
    onClear() {
      this.$refs.hidebox.style.display = "none";
      this.$refs.history.style.display = "block";
      this.$refs.hotsearch.style.display = "block";
      this.value = "";
    },
    onCancel() {
      this.$refs.hidebox.style.display = "none";
    },

    onSearch(value) {
      console.log(value);
      this.$refs.hidebox.style.display = "block";
      this.$refs.history.style.display = "none";
      this.$refs.hotsearch.style.display = "none";

      addhistoryaction({
        keyword: this.value,
        openId: 17516331686
      }).then(res => {
        console.log(res);
        var i = this.list.findIndex(el => el == this.value);
        if (i == -1) {
          this.list.push(this.value);
        }
      });

      helperaction({
        //回车搜索时，显示搜索提示
        keyword: this.value,
        order: "asc"
      }).then(res => {
        // console.log(res.keywords);
        this.keywords = res.keywords;
      });
    },
    addtip(item) {
      console.log(item);
      addhistoryaction({
        keyword: item.name,
        openId: 17516331686
      }).then(res => {
        console.log(res);
      });
      var i = this.list.findIndex(el => el == item.name);
      if (i == -1) {
        this.list.push(item.name);
      }
      this.$router.push({path:'/search/info',query:{name:item.name}});
    },
    toinfo(item){
      this.$router.push({path:'/search/info',query:{name:item}});
    }
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.box {
  margin-top: 1.226667rem;
}
.searchtips {
  // position: absolute;
  // width: 100%;
  // top: 1.21333rem;
  // left: 0;
  // bottom: 0;
  height: calc(100% - 2.666667rem);
  margin-top: 0;
  display: none;
  box-sizing: border-box;
  padding: 0 0.42667rem;
  // z-index: 9;
  background: #fff;
  overflow-y: scroll;
  .tips {
    padding: 0.26667rem 0;
    text-align: left;
  }
}
.history {
  background: #fff;
  padding: 0.42667rem;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    .icon {
      width: 0.73333rem;
      height: 0.73333rem;
      background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/del1-93f0a4add4.png)
        no-repeat;
      background-size: 100% 100%;
    }
  }
  .old {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item {
      padding: 0.13333rem 0.13333rem;
      border: 0.01333rem solid #999;
      margin: 0 0.4rem 0.26667rem 0;
    }
  }
}
.hotsearch {
  margin-top: 0.26667rem;
  background: #fff;
  padding: 0.42667rem;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
  }
  .hot {
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 0.13333rem 0.13333rem;
      margin: 0 0.4rem 0.26667rem 0;
      &:first-child {
        border: 0.01333rem solid #b4282d;
        color: #b4282d;
      }
    }
  }
}
</style>